// 1.传递一个简单类型的prop prop变化组件重新渲染

// 2.传递一个引用类型的prop 比较的是新值和旧值是否相等 当父组件的函数重新执行时，实际上形成的是新的数组引用

// 3.保证引用稳定 -> useMemo 组件渲染的过程中缓存一个值

import { memo, useMemo, useState } from "react"

const MemoSon = memo(function son(props) {
    console.log(`子组件重新渲染了`)
    return <div>this is Son {props.list}</div>
})

const practice1 = () => {
    const [count, setCount] = useState(0)
    // const num = "100"
    // const list = [1, 2, 3]
    const list = useMemo(() => {
        return [1, 2, 3]
    }, [])
    
    return (
        <div>
            <div>memo</div>
            <MemoSon list={list} />
            <button onClick={() => setCount(count + 1)}>change count</button>
        </div>
    )
}

export default practice1